<template>
  <div class="login-container">
    <van-nav-bar
      title="登录"
      left-text="返回"
      left-arrow
      @click-left="onClickLeft"
    />
    <van-form @submit="onSubmit" class="form-container">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="请输入用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div class="button-container">
        <van-button round block type="info" native-type="submit">
          提交
        </van-button>
        <div class="third-party-container" style="margin-top: 24px;">
          <van-button
            plain
            icon="qq"
            type="info"
            @click="handleThirdPartyLogin"
          >
            钉钉登录
          </van-button>
          <van-button
            plain
            icon="qq"
            type="info"
            @click="handleThirdPartyLogin('qq')"
          >
            QQ登录
          </van-button>
        </div>
      </div>
    </van-form>
    <van-tabbar v-model="active">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">搜索</van-tabbar-item>
      <van-tabbar-item icon="friends-o">朋友</van-tabbar-item>
      <van-tabbar-item icon="setting-o">设置</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import Vant from 'vant';
import axios from 'axios';


// 初始化表单相关的数据
const username = ref('');
const password = ref('');
const active = ref(0);

// 返回按钮点击事件处理函数
const onClickLeft = () => {
  // 这里可以添加具体的返回逻辑，比如路由跳转等
  console.log('点击返回按钮');
};

// 表单提交事件处理函数
const onSubmit = (values) => {
  console.log('表单提交数据：', values);
  // 这里可以添加提交表单数据到后端等具体逻辑，比如调用接口发送数据等
  // 可以进行简单的数据验证等前置操作
  if (!username.value ||!password.value) {
    return;
  }
};

// 第三方登录处理函数
const handleThirdPartyLogin = () => {
 
  // 这里可以添加第三方登录的逻辑
  axios.get('http://127.0.0.1:8000/user/dinglogin/3/')
  .then(res=> {
    console.log(res)
    window.location.href=res.data.url
  }
  )
};

const iconDingtalk = "iconfont icon-dingtalk";
</script>



<style scoped>
/* 登录容器样式 */
.login-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 改为 flex-start 让内容贴近顶部 */
  min-height: 100vh;
  background-color: #e6f2ff;
  padding-top: 60px; /* 为固定导航栏留出空间 */
}

/* 导航栏样式 */
.van-nav-bar {
  width: 100%;
  position: fixed;
  top: 0;
  z-index: 999;
}

/* 表单容器样式 */
.form-container {
  width: 90%; /* 使用百分比以适应不同屏幕宽度 */
  max-width: 400px; /* 设置最大宽度 */
  margin: 16px auto; /* 垂直方向的边距调整为16px，水平方向保持自动 */
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
  padding: 24px;
  box-sizing: border-box;
}


/* 表单内部元素样式 */
.van-cell-group__title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin-bottom: 12px;
}

.van-field {
  border: 1px solid #d1e8ff;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: border-color 0.3s ease;
}

.van-field:focus {
  border-color: #007aff;
}

/* 按钮容器样式 */
.button-container {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* 提交按钮样式 */
.van-button[type="info"] {
  width: 100%;
  padding: 12px 0;
  font-size: 16px;
  background: linear-gradient(90deg, #1890ff, #40a9ff);
  color: #fff;
  border-radius: 8px;
  margin-bottom: 16px;
  transition: background 0.3s ease;
}

.van-button[type="info"]:active {
  background: linear-gradient(90deg, #40a9ff, #1890ff);
}

/* 第三方登录按钮容器样式 */
.third-party-container {
  display: flex;
  justify-content: space-between; /* 保持两端对齐 */
  width: 100%;
  margin-top: 24px; /* 增加顶部边距 */
}


.third-party-container .van-button {
  width: 48%; /* 两个按钮平分宽度 */
  border: 1px solid #d1e8ff;
  color: #007aff;
  border-radius: 8px;
  padding: 10px 0; /* 调整内边距 */
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.3s ease, background-color 0.3s ease;
}

.third-party-container.van-button:active {
  border-color: #333;
  background-color: #e6f2ff;
}

.third-party-container.van-button.icon {
  margin-right: 8px;
  font-size: 20px;
}

/* 标签栏样式 */
.van-tabbar {
  width: 100%;
  position: fixed;
  bottom: 0;
  z-index: 998;
  background-color: #fff;
}

.van-tabbar-item__icon,
.van-tabbar-item__text {
  color: #666;
}

.van-tabbar-item--active.van-tabbar-item__icon,
.van-tabbar-item--active.van-tabbar-item__text {
  color: #007aff;
}
</style>